<template>
  <div>
    <mt-swipe :auto="3000">
      <!-- 在组件中，使用v-for循环，一定要使用key -->
      <!-- 将来，那个用轮播图组件，谁来传递lunbotuList-->
      <!-- 此时，lunbotuList应该是父组件向子组件传值来设置 -->
      <mt-swipe-item v-for="item in lunbotuList" :key="item.img">
        <img :src="item.img" :class="{full:isfull}">
      </mt-swipe-item>
    </mt-swipe>
  </div>
  <!-- 分析：为什么，商品详情中的轮播图失真了
      1、首页中的图片，它的宽高都是使用了100%
      2、在商品详情中，使用100%的就变形了
      3、商品详情页面中的轮播图，期望高度是100%，但是宽度自适应
      4、经过分析，得到原因：首页中的轮播图和详情中的轮播图，分歧点，是宽度到底是100%还是自适应
      5、既然这两个轮播图，其它方面都是没有冲突的，只是宽度有分歧，那么，我们可以定义一个属性，让使用轮播图的调用者，手动指定是否为100%的宽度
     -->
</template>

<script>
export default {
    props:["lunbotuList","isfull"]
};
</script>

<style lang="scss" scoped>
.mint-swipe {
  height: 150px;
  .mint-swipe-item{
    text-align: center;
    img {
     
      height: 100%;
    }
  }
  .full{
    width: 100%;
  }
}
</style>
